<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>超出宽度压缩比例分配</title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <style>
        .ct1 li:nth-of-type(7){
            flex-shrink:4;
        }

        .ct2 li{
            flex-shrink: 0;
        }
        .ct2 li:nth-of-type(7){
            flex-shrink:4;
        }
    </style>
</head>
<body>
    <h1>超出宽度压缩比例分配(flex-shrink)</h1>
    <ol>
        <li>元素默认<code>flex-shrink</code>值是1</li>
    </ol>
    
    <h2>示例一：以下是计算过程</h2>
    <ol>
        <li>1~6号flex-shrink默认为1</li>
        <li>7号flex-shrink设置为4</li>
        <li>子元素flex-shrink之和就是：6*1+1*4=10</li>
        <li>以iphone6为例，页面宽750px</li>
        <li>这里单个原本宽度是120px，超出了120*7-750=90px</li>
        <li>1~6号的压缩比是：1/10 那压缩宽度为：1/10*90=9</li>
        <li>1~6号的最终宽度是：120-9=111px</li>
        <li>7号的压缩比是：4/10 那压缩宽度为：4/10*90=36</li>
        <li>7号的最终宽度是：120-36=84px</li>
    </ol>
    <ul class="container ct1">
        <li class="first">1</li>
        <li class="second">2</li>
        <li class="third">3</li>
        <li class="fourth">4</li>
        <li class="first">5</li>
        <li class="second">6</li>
        <li class="third">7</li>
    </ul>
    
    <h2>示例二：以下是计算过程</h2>
    <ol>
        <li>flex-shrink为0不参与压缩计算</li>
        <li>1~6号flex-shrink设置为0</li>
        <li>7号flex-shrink设置为4</li>
        <li>子元素flex-shrink之和就是：6*0+1*4=4</li>
        <li>这里单个原本宽度是120px，超出了120*7-750=90px</li>
        <li>7号的压缩比是：4/4 那压缩宽度为：4/4*90=90</li>
        <li>7号的最终宽度是：120-90=30px</li>
    </ol>
    <ul class="container ct2">
        <li class="first">1</li>
        <li class="second">2</li>
        <li class="third">3</li>
        <li class="fourth">4</li>
        <li class="first">5</li>
        <li class="second">6</li>
        <li class="third">7</li>
    </ul>
    

    <script src="js/com-nav.js"></script>
</body>
</html>